<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h3>【JS-task4】return的用法是什么？若用在for循环中，还会执行下一次循环吗？</h3>
            <h3>小课堂【深圳第400期】</h3>
            <p>分享人：陈树威</p>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <h3>1.背景介绍</h3>
        </section>
        <section>
            <h3>什么是return?</h3>
            <section>
                <p>return 语句会终止函数的执行，并返回函数的值。</p>
            </section>
            <section>
               <pre><code>
                语法：
                return value;
                可选项 value指定返回的值。如果忽略则返回undefined.
            </code></pre>
                <p>在函数中 ，return 语句用于终止一个函数的执行，并返回值value。如果value被省略，
                    或在函数内没有 return 语句被执行，则函数返回undefined。</p>
            </section>

        </section>
        <section>
            <h3>2.知识剖析</h3>
        </section>
        <section>
            <h3>return语句的用法</h3>
        </section>
        <section style="text-align: left">
            <h4>1、中止函数的执行，并返回函数执行的结果</h4>
            <p>语法为：return+表达式</p>
            <p> return 返回的值可以是任何数据类型</p>
            <pre><code>
                function number(){
                   var a=1;
                   var b=2;
                   return a+b;//返回数值
                   alert('a')
                  }
                number();
                console.log(number());
                function string(){
                   return "字符串"//返回字符串
                }
                console.log(string());
                function object(){
                  return [1,2,3,4]//返回数组
                }
                console.log(object())
            </code></pre>
        </section>
        <section style="text-align: left">
            <h4>2、使用return阻止某些浏览器默认的行为</h4>
            <p>语法为：return false;</p>
            <p>这种用法通常用于阻止表单的提交。</p>
            <p>在提交表单前，我们需要先校验客户提交的数据,格式是否正确,或者需要对这些数据进行一个处理再提交,这时候就需要先阻止下默认提交表单的行为 例如下面的例子：</p>
        </section>
        <section>
             <pre><code>
                <form action="/sss" method="post">
                 <input type="text" placeholder="请输入账号"><br/>
                 <input class="password" type="number" placeholder="请输入密码"><br/>
                 <input class="password" type="number" placeholder="再次输入密码"><br/>
                 <input type="submit" value="button" onclick="return func()" />
                    <!--注意是onclick内是return func();而不是简单的调用func()函数-->
             </form>
                <script>
                    var inputPassword=document.getElementsByClassName('password');
                    console.log(inputPassword[1])
                    function func(){//当两次密码输入不一致时阻止提交表单
                        if(inputPassword[0].value!==inputPassword[1].value) {
                            alert('两次输入的密码不一致');
                            return false;
                        }
                    }
                </script>
            </code></pre>
        </section>

        <section style="text-align: left">
            <section style="text-align: center"><h3>3.常见问题</h3></section>
        </section>
        <section style="text-align: left">
            <section>
            <h3>若return用在for循环中，还会执行下一次循环吗？</h3>
            </section>
            <section>
                <h3>除了return之外，还有哪些语句可以跳出循环？</h3>
            </section>
        </section>
        <section style="text-align: left">
            <section style="text-align: center"><h3>4 解决方案</h3></section>

        </section>
        <section>
            <p>代码示例:</p>
            <pre><code>
                function jumpLoop() {
                   result = []
                   for(var i=0;i<10;i++){
                      result.push(i)
                      if(i===5){
                         return result;
                      }
                   }
                }
                console.log(jumpLoop())
            </code></pre>
            <p>我们可以看到，for循环只返回return所返回的值，并不会执行下一次循环。</p>
        </section>
        <section>
            <h4>除了return之外，还有哪些语句可以跳出循环？</h4>
            <section>
            <p>break</p>
            <pre><code>
                    for(var i=0;i<=10;i++){
                       document.write(i);
                       if(i==5){break;}
                    }
                </code></pre>
            <p>上面这个break实例，输出的结果为：12345，当i的值等于5的时候直接通过break跳出了循环，不再继续往下运行。</p>
            </section>
        <section>
            <p>continue</p>
            <pre><code>
                    for(var i=1;i<=10;i++){
                        if (i == 5) continue;
                        document.write(i);
                    }
                </code></pre>
            <p>上面这个continue实例，输出的结果为：1234678910，当i的值等于5的时候直接跳过，继续执行循环。</p>
        </section>
        </section>

        <section style="text-align: left">
            <section style="text-align: center"><h3>5.编码实战</h3></section>
        </section>
        <section>
            <section>
                <h3 style="text-align: center">6.扩展思考</h3>
                <p>jq的return false 和原生的return false有什么区别</p>

            </section>
            <section>
                <p style="text-align: left">在jq中使用return false实际上它完成了3件事：
                    1.event.preventDefault()<br/>
                    2.event.stopPropagation()<br/>
                    3.终止函数的执行并返回结果。<br/>
                    jq的return false会同时阻止浏览器默认事件的发生，阻止事件的冒泡，并且返回函数值，而在原生js中，return并不能阻止事件的冒泡.
                </p>
            </section>
        </section>
        <section style="text-align: left">
            <h3>7.参考文献</h3>
            <p>参考1：<a href="https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false">event.preventDefault() vs. return false</a></p>
            <p>参考2：<a href="http://www.jb51.net/article/30388.htm">javascript中break，continue和return语句用法小结</a></p>
            <p>参考2：<a href="http://blog.csdn.net/gmd_web/article/details/50371841"> js中return的用法</a></p>
        </section>
        <section>
            <h3>8 更多讨论</h3>
        </section>
        <section>

            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p>
                <small>BY :包腾飞|陈树威</small>
            </p>
        </section>

    </div>
</div>

<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>

<script>

    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }

    // 初始化幻灯片
    Reveal.initialize({
//        history: true,
        transition: 'default',
        transitionSpeed: 'slow',
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
    //    原始类型对象直接赋值不会相互影响
    //    var a = 1;
    //
    //    var b = a;
    //    b = 10;
    //    console.log(a); // 1
    ////
    //    var a = 'hello';
    //    var b = a;
    //    b = 'world';
    //    console.log(a); // hello
    //
    //    var a = true;
    //    var b = a;
    //    b = false;
    //    console.log(a);

    //数组浅复制
    //    var a = ['隔壁老王','冠希哥', '宋经理' //定义一个名为a的属猪，里面有3个值，
    //    ];
    //    var b = a;   //定义一个变量b，把a赋值给他，这样比、b和a一样了
    //    b[2] = '冲冲老师'; //然后把b的第三个值等于冲冲老师
    //    console.log(a)//那么现在打印a 是什么结果呢
    //
    //    var arr = ["One","Two","Three"];   //数组的深复制，slice方法
    //    var arrtoo = arr.slice(1);
    //    arrtoo[2] = "set Map";
    //    console.log(arr);//One,Two,Three
    //    console.log(arrtoo);//One,set Map,Three

    //
    //    var arr1 = ["One","Two","Three"]; //数组的深复制，concat 方法
    //    var arrtooo = arr1.concat(111111);
    //    arrtooo[1] = "set Map To";
    //    console.log(arr1);//One,Two,Three
    //    console.log(arrtooo);//One,set Map To,Three

    //
    //    var b=[1,2,3,4,5];   //concat的链接
    //    var c=[6,7,8,9];
    //    var d =[4,4,22]
    //    console.log(b.concat(c,d))

    var a = {name: 'yy', age: 26};  //对象的浅拷贝哦
    var b = new Object();
    b.name = a.name;
    b.age = a.age;
    b.name = 'xx';
    console.log(a);//Object { name="yy", age=26}
    console.log(b);//Object { name="xx", age=26}

    var d = {            //对象的浅拷贝哦 第一种
        name: 'd',
        oc: {
            age: 32
        },
        oad: {
            adds: {
                bb: 12
            }
        }
    };
    var deepCopy = function (source) {
        var result = {};
        for (var key in source) {
            result[key] = typeof source[key] === 'object' ? deepCopy(source[key]) : source[key]
        }
        return result
    };

    var c = deepCopy(d);
    c.name = 'c';
    c.oc = {
        age: 49
    };
    console.log(c);
    console.log(d);


    //    var person = {    //第二种深拷贝
    //        name: 'aa',
    //        friends: ['da', 'dsa', 'gf']
    //    };
    //
    //    var aPerson = Object.create(person, {
    ////        name: {
    ////            value: "gee"
    ////        }
    //    });
    //
    //    console.log(person.name);
    //    console.log(aPerson.friends)

    var Chinese = {
        nation: '中国'

    }
    var Doctor = {
        career: '医生'
    }

    function extendCopy(p) {
        var c = {};
        for (var i in p) {
            c[i] = p[i];
        }
        c.uber = p;
        return c;
    }

    var Doctor = extendCopy(Chinese);
    Doctor.career = '医生';
    console.log(Doctor); // 中国
    Chinese.birthPlaces = ['北京', '上海', '香港'];
    var Doctor = extendCopy(Chinese);
    Doctor.birthPlaces.push('厦门');

</script>
</body>
</html>
